<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>Flotr: Click Event Hook Example</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<script type="text/javascript" src="../lib/yepnope.js"></script>
	</head>
	<body>
	<body>
		
		<!-- ad -->
		
		<div id="wrapper">
			<h1></h1>
			<div id="container" style="width:600px;height:300px;"></div>
			<h2>Example</h2>
			<p>When you click the graph with the mouse the coordinates of the click are added to the dataset and
			the graph is redrawn. This is done by observing the 'flotr:click' event. Read more about the <a href="http://www.solutoire.com/flotr/docs/eventhooks/" title="Flotr Event Hooks">event hooks</a>.</p>
			<p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a>, play with the <a href="../../playground/index.html" title="Flotr playground">playground</a> or read the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p>
			<h2>The Code</h2>
			<pre id="code-view"><code class="javascript"></code></pre>
			<div id="footer">Copyright &copy; 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div>
		</div>
		
		<!-- ad -->
		
		<script type="text/javascript">
			function example(){			

                var container = document.getElementById('container');

				/**
				 * Default options.
				 */
				var options = {
					xaxis: {min: 0, max: 15},
					yaxis: {min: 0, max: 15},
					lines: {show: true},
					points: {show: true},
					mouse: {track:true}
				};
				
				/**
				 * Start with a single coordinate in the origin.
				 */
				var d1 = [[0,0]];
						    
				/**
				 * Draw an empty graph and configure the axis.
				 */
				var f = Flotr.draw(container, [d1], options);
				
				/**
				 * Observe the 'flotr:click' event. When the graph is clicked, add the click
				 * position to the d1 series and redraw the graph.
				 */
                Flotr.EventAdapter.observe(container, 'flotr:click', function(position){
					// Store the click position in the d1 series.
					d1.push([position.x, position.y]);
					
					// Sort the series.
					d1 = d1.sort(function(a, b){ return a[0] - b[0]; });
					
					// Redraw the graph, with the new series.
					f = Flotr.draw(container, [d1], options);
				});
			};			
		</script>
		
		<!-- analytics -->
		
	</body>
	<script type="text/javascript" src="includes.js"></script>
</html>
